import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('link-card')
export class Card extends LitElement {
  @property({ type: String }) title = '';
  @property({ type: String }) url = '';

  static styles = css`
      :host {
          display: inline-block;
          width: 240px;
          margin: 10px;
          background-color: #333; /* 暗黑主题背景色 */
          color: white;
          border-radius: 8px;
          text-align: left;
          padding: 16px; /* 文本四周的内边距 */
          transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
          cursor: pointer;
      }

      :host:hover {
          background-color: #444; /* 鼠标经过时的背景色 */
          transform: translateY(-2px);
      }

      :host:active {
          background-color: #555; /* 点击时的背景色 */
          transform: translateY(0);
      }

      a {
          text-decoration: none;
          color: inherit;
          font-size: 18px;
          font-weight: bold;
          display: block;
          width: 100%;
          height: 100%;
          white-space: normal; /* 允许文本换行 */
          word-wrap: break-word; /* 允许长单词换行 */
      }
  `;

  render() {
    return html`
      <a href="${this.url}" target="_blank" rel="noopener noreferrer">
        ${this.title}
      </a>
    `;
  }
}